<template>
	<view class="">
		<view v-if="list.length<4" class="box">
			<view v-for="item in list" class="item">
				<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/lihua.png" mode=""></image>
				<view class="text-cut">
					恭喜商户{{item.name}}认证成功
				</view>
			</view>
		</view>
		<!--  -->
		<!--  -->
		<view v-else class="box" :style="{ height: swiperHeight + 'px' }">
			<swiper class="swiper" :vertical="true" autoplay circular @change="handleChange">
				<swiper-item v-for="item in tabList" class="swiper-item">
					<view class="swiper-view" >
						<view v-for="(tab,tabIndex) in item" class="item" :id="'wrap' + tabIndex">
							<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/lihua.png" mode=""></image>
							<view class="text-cut">
								恭喜商户{{tab.name}}认证成功
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util'
	export default {
		props: {
			list: Array
		},
		data() {
			return {
				swiperHeight: 0,
				tabList: [],
				current: 0,
				tabUrl: 'https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/tab-1.png',
			}
		},
		watch: {
			list: {
				handler(val) {
					this.tabList = util.twoArray(val, 3)
					
					this.$nextTick(() => {
						this.setSwiperHeight(); // 动态设置 swiper 的高度
					});
				},
				immediate: false,
				deep: true,
			}
		},
		methods: {
			/* 动态设置 swiper 的高度 */
			setSwiperHeight() {
				this.swiperHeight = 0
				this.tabList[this.current].forEach((item,index)=>{
					const element = "#wrap" + index;
					const query = uni.createSelectorQuery().in(this);
					query.select(element).boundingClientRect();
					query.exec(res => {
						this.swiperHeight  += res[0]?.height;
					});
				})
			},
			handleChange(e) {
				this.current = e.detail.current;
				this.setSwiperHeight()
			},
			toPage(item) {
				if (item.path.includes('/pages/product/index/index')) {
					uni.$emit('handlePath', `${item.path}?platClassifyCode=${item.bizId}`)
				} else if (item.path.includes('/pages/pet/auth/index')) {
					uni.$emit('handlePath', item.path)
				} else {
					uni.navigateTo({
						url: `${item.path}?id=${item.bizId}`
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: 718rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 24rpx;
		box-sizing: border-box;

		.item {
			width: 100%;
			height: 112rpx;
			border-bottom: 1rpx solid #F6F6F6;
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			view {
				flex: 1;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: var(--h1Color);
				line-height: 48rpx;
			}
		}

		.swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				width: 100%;
				height: 100%;

				.swiper-view {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>